﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="~/layui/css/layui.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.2.0/css/all.css" rel="stylesheet">
    <script src="https://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
    <title>华南人资系统</title>
    <style>
        .bigbd{
            height:180px;
        }
        .smbd{
            height:110px;
        }
        .bd{
            width:25%;
            margin-top: 10px;
            float: left;
            text-align: center;
        }

        em, i {
            font-style: normal;
        }

        .first-tab i.layui-tab-close {
            display: none !important;
        }

        .nav-tree-main .layui-nav-item > a i {
            margin-right: 10px;
        }

        .nav-tree-main .layui-nav-item > .layui-nav-child dd a {
            padding-left: 40px;
        }

        #menuBar {
            cursor: pointer;
            color: #fff;
            position: absolute;
            left: 0;
            top: 0;
            margin: 22px;
        }

        .layui-layout-admin .layui-logo {
            left: 64px;
            text-align: left;
            color: #fff;
        }

        /* 左侧栏 *** 向左折叠 mini-sidebar */

        .mini-sidebar .layui-layout-admin .layui-side {
            width: 48px;
            overflow-x: visible;
        }

            .mini-sidebar .layui-layout-admin .layui-side:hover .layui-side-scroll {
                width: 268px;
            }

        .mini-sidebar .nav-tree-main .layui-side-scroll {
            width: 48px;
            overflow-x: initial;
        }

        .mini-sidebar .nav-tree-main.layui-nav-tree {
            width: 48px !important;
        }

            .mini-sidebar .nav-tree-main.layui-nav-tree .layui-nav-item {
                position: relative;
            }

        .mini-sidebar .nav-tree-main > .layui-nav-item > .layui-nav-child {
            position: absolute;
            left: 48px;
            top: 0;
            width: 200px;
            background-color: rgba(57,61,73,.9) !important;
            display: none;
            z-index: 9999;
            border-radius: 0;
        }

            .mini-sidebar .nav-tree-main > .layui-nav-item > .layui-nav-child dd a {
                line-height: 40px;
                text-align: left;
                padding: 0 20px;
                color: #fff;
            }

        .mini-sidebar .nav-tree-main > .layui-nav-item:hover > .layui-nav-child {
            display: block;
        }

        .mini-sidebar .nav-tree-main > .layui-nav-item a {
            padding: 10px 0 0 0;
            line-height: 15px;
            text-align: center;
        }

        .mini-sidebar .nav-tree-main > .layui-nav-item > a > .sideIcons {
            margin: 0 auto;
        }

        .mini-sidebar .nav-tree-main .icon {
            line-height: 12px;
        }

        .mini-sidebar .nav-tree-main > .layui-nav-item a > .cite {
            display: block;
            line-height: 12px;
            padding-top: 5px;
            font-size: 12px;
        }

        .mini-sidebar .nav-tree-main > .layui-nav-item .cite em {
            display: none;
        }

        .mini-sidebar .nav-tree-main > .layui-nav-item .layui-nav-child dd .cite {
            line-height: 40px;
            padding: 0;
        }

        .mini-sidebar .nav-tree-main > .layui-nav-item > a .layui-nav-more {
            display: none;
        }

        .mini-sidebar .nav-tree-main .sub-nav .layui-nav-item a {
            line-height: 40px;
            text-align: left;
            padding: 0 20px;
            color: #b4bcc8;
        }

        .mini-sidebar .nav-tree-main .sub-nav .layui-nav-item .layui-nav-more {
            display: block;
        }

        .mini-sidebar .layui-body {
            left: 48px;
        }

        .mini-sidebar .nav-tree-main .layui-nav-item > a i {
            margin: 0 auto;
        }

        /*右侧*/
        .layui-fluid {
            padding: 15px;
        }

        .wMain-col-bg1, .wMain-col-bg2 {
            background: #79C48C;
            text-align: center;
            padding: 24px;
            color: #fff;
        }

        .wMain-col-bg2 {
            background: #63BA79;
        }
    </style>
</head>
<body class="mini-sidebar">
    <div class="layui-layout layui-layout-admin">
        <!--head-->
        <div class="layui-header header">
            <!--隐藏左侧导航-->
            <a href="javascript:;">
                <i class="layui-icon layui-icon-shrink-right" id="menuBar"></i>
            </a>
            <div class="layui-logo"><a href="javascript:history.go(0)" target="_top" style="color:white;">华南人资</a></div>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                    <a href="javascript:;">
                        欢迎您：@Context.Session.GetString("name")

                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="">Your Profile</a></dd>
                        <dd><a href="">设置</a></dd>
                        <dd><a href="..">退出登录</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
        <!--end head-->
        <!--left-->
        <div id="menu" class="layui-side layui-bg-black leftMenuDiv">
            <div class="layui-side-scroll" id="leftNav">
            </div>
        </div>
        <!--end left-->

        <div class="main_right">
            <iframe frameborder="0" scrolling="yes" style="width:100%;width:100;zoom: 150%;margin-top:60px;" src="../home/welcome" id="aa">
            </iframe>
        </div>
    </div>
    <script src="~/layui/layui.js"></script>
    <script>
        // 导航菜单的间隔像素
        var menuCell = 1;


        //后台获取菜单数据
        function getMenuData(phone) {
            var data = [];
            $.ajax({
                url: "/TreeData/GetUserOrgTreeData",
                type: "post",
                data: { "UserId": phone },
                async: false,
                success: function (resut) {
                    data = resut;
                }
            });
            return data;
        }


        layui.use(['element', 'layer', 'jquery', 'form'], function () {
            var element = layui.element;
            var layer = layui.layer;
            var form = layui.form;
            var $ = layui.$;

            $(function () {
                //获取src值
                $(".main_left a").on("click", function () {
                    var address = $(this).attr("data-src");
                    $("iframe").attr("src", address);
                });
                //一下代码是根据窗口高度在设置iframe的高度
                var frame = $("#aa");

                var frameheight = $(window).height();
                console.log(frameheight);
                frame.css("height", frameheight);
            });

            var data = getMenuData(@Context.Session.GetString("phone"));
            var liStr = "";

            // 遍历生成主菜单
            for (var i = 0; i < data.length; i++) {
                //console.log("--> "+JSON.stringify(data[i]));
                // 判断是否存在子菜单
                if (data[i].children != null && data[i].children.length > 0) {
                    console.log("--> " + JSON.stringify(data[i].children));
                    liStr += "<li class=\"layui-nav-item\"><a><i class=\"fa fa-home\"></i><span class=\"cite\"><em> " + data[i].name + "</em></span></a>\n" +
                        "<dl class=\"layui-nav-child\">\n";
                    // 遍历获取子菜单
                    for (var k = 0; k < data[i].children.length; k++) {
                        liStr += getChildMenu(data[i].children[k], 0);
                    }
                    liStr += "</dl></li>";
                } else {
                    liStr += "<li class=\"layui-nav-item\"><a class=\"site-demo-active\" href=\"javascript:;\" data-url=\"" + data[i].url + "\"><i class='layui-icon " + data[i].icon + "'></i> " + data[i].name + "</a></li>";
                }
            };
           // 递归生成子菜单
function getChildMenu(subMenu, num) {
    console.log("num: " + num);
    num++;
    var subStr = "";
    if (subMenu.children != null && subMenu.children.length > 0) {
        num =
            subStr += "<dd><ul><li class=\"layui-nav-item\" ><a class=\"\" href=\"javascript:;\"><i class=\" " + subMenu.icon + "\"></i> " + subMenu.name + "</a>" +
            "<dl class=\"layui-nav-child\">\n";
        for (var j = 0; j < subMenu.children.length; j++) {
            subStr += getChildMenu(subMenu.children[j], num);
        }
        subStr += "</dl></li></ul></dd>";
    } else {
        subStr += "<dd class=\"main_left\"><a class=\"site-demo-active\" style=\"text-indent:4em\"  target=\"_top\"  data-title=\"" + subMenu.title + "\" data-src=\"../home/welcome\" data-id=\"" + subMenu.dataid + "\" > <i class=\"" + subMenu.icon + "\" > </i> " + subMenu.name + "</a > </dd>";
    }
    return subStr;
};

            $("#menu").html("<ul class=\"layui-nav layui-nav-tree nav-tree-main\" lay-shrink=\"all\" lay-filter=\"test\">\n" + liStr + "</ul>");

            element.init();

            // 页面切换
            $(document).on('click', '#menu', function () {
                var thisPage = $(this).attr("data-url");
                if (typeof (thisPage) != "undefined") {
                    if ($('.layui-body iframe').attr('src') == thisPage) return;
                    $('.layui-body iframe').attr('src', thisPage)
                }
            });

            // 左侧栏向左折叠
            $(function () {
                $("#menuBar").on('click', function () {
                    if ($("body").hasClass("mini-sidebar")) {
                        $("body").removeClass("mini-sidebar");
                        $(this).removeClass("layui-icon-shrink-right");
                        $(this).addClass("layui-icon-spread-left");
                    } else {
                        $("body").addClass("mini-sidebar");
                       
                        $(this).addClass("layui-icon-shrink-right");
                        $(this).removeClass("layui-icon-spread-left");
                    }
                });
            });
          
        });

    </script>
</body>
</html>
